'use client';
import React, { createContext } from 'react';
import { Button } from 'antd';
import { useState, useReducer } from 'react';
import '@ant-design/v5-patch-for-react-19';
function countReducer(state, action) {
  switch (action) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      throw new Error();
  }
}
function Article({ title, articleData }) {
  function handleActive() {
    console.log('active');
  }
  return (
    <div>
      <h1>标题： {title}</h1>
      <Detail {...articleData} onActive={handleActive} />
    </div>
  );
}
function Detail({ content, active, onActive }) {
  const [status, setStatus] = useState(false);
  function handleClick() {
    setStatus(!status);
    onActive();
  }
  return (
    <div>
      <p style={{ display: status ? 'block' : 'none' }}>这是详情页{content}</p>
      <span>状态：{active ? '显示' : '隐藏'}</span>
      <button onClick={handleClick}>点击</button>
    </div>
  );
}
function Content() {
  const pObj = {
    className: 'content',
    style: {
      color: 'red',
      fontSize: '20px',
    },
  };
  return (
    <div>
      <p {...pObj}>这是内容</p>
    </div>
  );
}
function Footer() {
  const [state, dispatch] = useReducer(countReducer, 0);
  return (
    <div>
      <p>这是页脚</p>
      <p>当前计数：{state}</p>
      <Button onClick={() => dispatch('increment')}>增加</Button>
      <Button onClick={() => dispatch('decrement')}>减少</Button>
    </div>
  );
}
function List({ children, title, footer = <div>我是页脚</div> }) {
  return (
    <>
      <h2>{title}</h2>
      <ul>{children}</ul>
      <h4>{footer}</h4>
    </>
  );
}
const LevelContext = createContext(1);
export default function Page() {
  const [isVisible, setIsVisible] = useState(true);
  const handleHideContent = () => {
    setIsVisible(false); // ✅ 只在按钮点击时调用
  };

  const content = '文章内容';
  const articleData = {
    title: '文章标题',
    detailData: { content: '文章内容', active: true },
  };
  return (
    <div>
      {/* <Article title="我的标题" content={content} active /> */}
      <Article title="我的标题" content={content} />
      <Button onClick={handleHideContent}>隐藏内容</Button>
      {isVisible && <Content />}
      <Footer />

      <List title="列表标题" footer={<div>我是页脚</div>}>
        <li>列表1</li>
        <li>列表2</li>
      </List>
    </div>
  );
}
